<template>
  <j-form-item label="幻灯片尺寸" >
    <j-space style="width: 240px">
      <span>高</span>
      <j-input-number
          v-model="item.slideItemHeight"
          precision="0"
          style="font-weight: 400;"
          :formatter="(value) => `${value}px`"
          :parser="(value) => parseInt(value.replace('px', ''))"
      ></j-input-number>
      <span style="width: 30px">宽</span>
      <j-input-number
          v-model="item.slideItemWidth"
          precision="0"
          style="font-weight: 400;"
          :formatter="(value) => `${value}px`"
          :parser="(value) => parseInt(value.replace('px', ''))"
      >
      </j-input-number>
    </j-space>
    <j-poptip :content="`在节点信息中，请上传高为${item.slideItemHeight}px，宽为${item.slideItemWidth}px的图片`"
              trigger='hover'
              style=" cursor: pointer;padding: 2px;margin: 0 5px;"
              placement="right">
      <j-icon
          type="icon-question-circle"
          :size='16'>
      </j-icon>
    </j-poptip>
  </j-form-item>
  <j-form-item label="切换方式" >
    <j-radio-group v-model="item.switchType">
      <j-radio v-for="radioItem in item.optionalSwitchTypeList"  :key="radioItem.value" :label="radioItem.value">{{ radioItem.label }}</j-radio>
    </j-radio-group>
  </j-form-item>
  <j-form-item label="时间间隔" v-if="item.switchType === '1'">
      <j-input-number
          v-model="item.timeIntervalValue"
          class="time_interval_part_input_element"
          style="font-weight: 400;width: 240px"
          :formatter="(value) => `${value}秒`"
          :parser="(value) => parseInt(value.replace('秒', ''))">
      </j-input-number>
  </j-form-item>
  <j-form-item label="页签样式">
    <div class="whole_tab_type">
      <j-radio-group v-model="item.tabType">
        <template v-for="radioItem in item.optionalTabTypeList">
          <j-radio
              :key="radioItem.value"
              :label="radioItem.value"
              v-if="(item.switchType === '0' && radioItem.value !== '3') || item.switchType === '1'">
            {{ radioItem.label }}
          </j-radio>
        </template>
      </j-radio-group>
      <common-icon-pic-item :key="item.id" :item="item" v-if="item.tabType === '4'" :style="item.switchType === '0'?'margin-left: 8px;':''">
      </common-icon-pic-item>
    </div>
  </j-form-item>
  <j-form-item label="分页器颜色" v-if="item.tabType === '0' || item.tabType === '3'">
    <j-color-picker v-model="item.paginatorColor"/>
  </j-form-item>
  <j-form-item label="动画效果" v-if="item.tabType === '0'">
    <j-radio-group v-model="item.animationType">
      <j-radio v-for="radioItem in item.animationTypeList"  :key="radioItem.value" :label="radioItem.value">{{ radioItem.label }}</j-radio>
    </j-radio-group>
  </j-form-item>
  <j-form-item label="页签位置" v-if="item.tabType === '1'">
    <j-radio-group v-model="item.tabLocation">
      <j-radio v-for="radioItem in item.optionalTabLocationList"  :key="radioItem.value" :label="radioItem.value">{{ radioItem.label }}</j-radio>
    </j-radio-group>
  </j-form-item>
  <j-form-item label="按钮高" v-if="item.tabType === '2'">
      <j-input-number
          v-model="item.buttonHeight"
          style="font-weight: 400;width: 240px"
          :formatter="(value) => `${value}px`"
          :parser="(value) => parseInt(value.replace('px', ''))">
      </j-input-number>
  </j-form-item>
  <j-form-item label="按钮位置" v-if="item.tabType === '2'">
    <j-radio-group v-model="item.buttonLocation">
      <j-radio v-for="radioItem in item.optionalTabLocationList"  :key="radioItem.value" :label="radioItem.value">{{ radioItem.label }}</j-radio>
    </j-radio-group>
  </j-form-item>
</template>

<script setup>
import CommonIconPicItem from "../common/CommonIconPicItem.vue";
import {ref, watch} from "vue";

const props = defineProps(['item'])
const item = props.item

watch(()=>item.switchType,()=>{
  item.tabType = '0'
})

// 颜色选择器初始化默认值
if (isEmpty(item.paginatorColor)) {

  let element = document.querySelector('body');

  let style = window.getComputedStyle(element);

  item.paginatorColor = style.getPropertyValue('--jui-color-primary-6'); // 获取颜色
}
// 判断是否为空
function isEmpty(data) {
  return ((data === undefined) || (data === null) || (data === ''))
}
</script>

<style scoped>
.whole_tab_type{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.time_interval_part_input_element {
   margin-right: 6px;
}
</style>
